<template>
    <!-- <div class="big" @click='sayHi("big")'> -->
        <!-- <span> {{ name }}</span>
        <p>{{ students.map(item=>item.name) }} </p>
        <p>{{ students.map(item=>item.name).includes('徐七') }} </p> -->
        <!-- <button @click = 'numberReduce'>-</button>
        <span>{{ number }}</span>
        <button @click = 'numberIncrease'>+</button> -->
        <!-- <div class="small" @click.stop='sayHi("samll")'></div>
        <a href="https://www.baidu.com/Index.htm" @click.prevent>百度</a>
    </div> -->
    <!-- <p>{{ temp }}</p>
    <p v-text="temp"></p>
    <p v-html="temp"></p> -->
    <!-- <a :href="location" v-show="isShow">跳转</a>
    <button @click="isShow = !isShow" >显示/隐藏</button> -->
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in arr" :key="item.id" >
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.gender }}</td>
                <td><button :id="item.id" >删除</button></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { ref, reactive } from 'vue';
const arr = ref([
    {id:0,name:'张三',age:20,gender:'男'},
    {id:0,name:'李四',age:20,gender:'男'},
    {id:0,name:'王五',age:20,gender:'男'},
    {id:0,name:'赵六',age:20,gender:'女'},
    {id:0,name:'张奕',age:20,gender:'男'},
]);
const isShow = 'true';
// function sayHi(name) {
//     console.log('Hi', 'I' + 'am' + name);

// }
// const temp = ref('<a href="https://www.baidu.com/Index.htm">百度</a>');
// const location = "https://www.baidu.com/Index.htm";
// const isShow = ref("true");
// const gender = reactive(10);
// console.log(gender);

// const name = ref('张奕');
// const age = ref(20);
// const student = reactive({
//     name:'赵奕',
//     age:18
// })
// const students = reactive([
//     {name:'张三',age:20,gender:'男'},
//     {name:'李四',age:20,gender:'男'},
//     {name:'王五',age:20,gender:'男'},
//     {name:'赵六',age:20,gender:'男'},
//     {name:'徐七',age:20,gender:'男'},
// ])
// console.log(name.value);
// console.log(age.value);
// console.log(student);
// const number = ref(0);
// function numberIncrease() {
//     number.value++;
// }
// function numberReduce() {
//     number.value--;
// }

</script>

<style scoped>
.big {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}

.small {
    width: 100px;
    height: 100px;
    background-color: darkkhaki;
}
</style>